import Vue from 'vue'
import App from './App'

import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')


// 设置全局axios的baseURL
axios.defaults.baseURL = 'http://123.207.32.32:8000/api/h8'
// 设置全局axios的超时时间/ms
axios.defaults.timeout = 5000

// 是否打开DEBUG
const DEBUG = false;

// 请求方式
const GET = 'get';
const POST = 'post';

// 请求数据类型
let type = 'sell';
let page = 1;

// 首页API
let url1 = `/home/multidata`;

// 类型为sell第一页的数据
// let firstPageUrl = `http://123.207.32.32:8000/api/h8/home/data?type=${type}&page=${page}`;
let firstPageUrl = `/home/data`;

// 分类
let url2 = `/category`

// 请求options
let option1 = {
  url: url1,
  method: GET
}

let option2 = {
  url: firstPageUrl,
  method: GET,
  params: {
    type,
    page
  }
}

let option3 = {
  url: url2,
  method: GET
}

// 1. 简单axios网络请求 [基本使用过程]
if (DEBUG) {
  axios(option1).then(res => {
    console.log("[正常] 首页数据 >>>", res.data);
  })

  axios(option2).then(res => {
    console.log("[正常] 过滤类型数据 >>>", res.data);
  })
}

// 2. 并发请求 >>> [多个请求进行合并处理]
if (DEBUG) {
  axios.all([
    axios(option1),
    axios(option2)
  ])
    // .then(results => {
    //   console.log("[正常] 两个网络请求 响应结果 合并数组 >>>", results);
    // })

    // 将结果展开 axios.spread()
    .then(axios.spread((res1, res2) => {
      console.log("[正常] 响应结果1 >>>", res1.data);
      console.log("[正常] 响应结果2 >>>", res2.data);
    }))
    .catch(err => {
      console.log("[异常] 其中有个请求失败了 >>>", err);
    })

  axios(option3).then(res => {
    console.log("[正常] 分类 >>>", res);
  })
  // 补充说明 >>> [数组解构] 
  let lists = ['why', 'kobe', 'Mr.chen'];
  let [name1, name2, name3] = lists;

  console.log(name1);
  console.log(name2);
  console.log(name3);
}

// 3. 创建一个对应的axios的实例
if (DEBUG) {
  const instance1 = axios.create({
    baseURL: 'http://123.207.32.32:8000/api/h8',
    timeout: 10000
  })

  instance1(option1).then(res => {
    console.log("[正常] 使用创建的实例测试请求是否成功 >>>", res);
  })
}

import { request1, request2, request3 } from './network/request'

// 4. 导入封装好的axios实例 >>> 三个参数 [一个配置对象, 两个回调函数]
if (DEBUG) {
  request1(option1,
    res => {
      console.log("[正常] option1 >>>", res);
    },
    err => {
      console.log("[异常] option1 >>>", err);
    }
  )
}

// 5. 一个参数 [对象内部含有一个配置对象与两个回调函数]
if (DEBUG) {
  request2({
    baseConfig: option2,
    success: res => {
      console.log("[正常] option2 >>>", res.data);
    },
    failure: err => {
      console.log("[异常] option2 >>>", err);
    }
  })
}

// 6. 因为axios所创建的实例本身就返回一个Promise, 我们大可不必浪费时间封装与传参, 直接将实例返回, 然后使用.then()、.catch()分别接收成功与失败回调即可。
request3(option3)
  .then(res => {
    console.log("[正常] option3 >>>", res.data);
  }).catch(err => {
    console.log("[异常] option3 >>>", err);
  })
